[iOS]UIImageViewにAspect Fillで画像を表示したらなんかはみ出しちゃった時にすること

こんにちは。最近iOSのUI実装を始めたデザイナー兼Androidエンジニアの横山です。
もはや自分自身がなにものかわからなくなって参りましたが、今回は画像を表示する時のポイントをご紹介します。

こんな時に

例えば、正方形のUIImageViewに長方形の画像を次のように表示したい場合、contentModeにAspect Fillを指定しますが、それだけでは期待する表示結果にはなりません。

Interface Builderと実際の表示が違う

Interface Builderでレイアウトして画像を表示した時には、問題なく表示されますがシミュレーターで表示してみると表示が崩れてしまいます。
正方形のUIImageViewを二つ並べてそれぞれにAspect Fillで長方形の画像を表示してみた例が以下です。

UIImageView(UIView)は自身の領域外の描画に関してはデフォルトで「描画する」ことになっています。そのため、画像がはみ出してしまったわけです。
これはInterface Builderでは確認することはできません。

こうする

Viewの領域外を描画しないようにするにはいくつかの方法があるのですが、UIViewのプロパティclipToBoundsの値を変えて対応する方法をご紹介します。

// When YES, content and subviews are clipped to the bounds of the view. 
// Default is NO.
@property(nonatomic) BOOL clipsToBounds;

↑これをYESにする。

①コード書かない方法（お手軽・デザイナーにおすすめ）

Story Boardで配置したUIImageViewを選択して、インスペクタペインのClip Subviewsにチェックを入れる。（UIImageViewを配置しただけではチェックが入っていない）

②コード書く方法

ViewControllerにUIImageViewを接続して clipToBoundsをYESにする。

sunRiseImageView.clipsToBounds = YES;
flowerImageView.clipsToBounds = YES;

こうなります

これで期待する表示結果を得ることができました。